<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="../static/css/bootstrap.css" />
    <!--需要在Javascript之前引入JQuer-->
    <script type="text/javascript" src="../static/js/jquery-1.11.0.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script type="text/javascript" src="../static/js/bootstrap.js"></script>
    <!--针对移动设备的样式，为了确保适当的绘制和触屏缩放-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--jquery.cookie.js-->
    <script src="../static/js/jquery.cookie.js"></script>
    <link rel="stylesheet" href="../static/css/user_check.css" />
    <script>
        $(function() {
            $("#username,#password").blur(function() {
                $(".high").remove();
                $("#username,#password").after("<font class='high'>6-14个字符(支持数字、英文字母)<font>");
                var value = $(this).val();

                $(".formtips").remove();

                //用户校验
                if($(this).is("#username")) {
                    if(!(/^[a-z0-9_-]{2,14}$/.test(value))) {
                        $(this).parent().after("<span class='formtips onError'>格式错误！</span>");
                    } else {
                        $(this).parent().after("<span class='formtips onSuccess'>成功！</span>");
                        $("#username + font").remove();
                    }
                }
                //	密码校验
                if($(this).is("#password")) {
                    if(!(/^[a-z0-9_-]{2,14}$/.test(value))) {
                        $(this).parent().after("<span class='formtips onError'>格式错误！</span>");
                    } else {
                        $(this).parent().after("<span class='formtips onSuccess'>成功！</span>");
                        $("#password + font").remove();
                    }
                }
            }).focus(function() {
                $(this).triggerHandler("blur");
            }).keyup(function() {
                $(this).triggerHandler("blur");
            });
            //  表单绑定事件
            $("form").submit(function() {
                $(".form-control").triggerHandler("focus");
                var length = $(".onError").length;
                if(length > 0 ) {
                    return false;
                }
                //打开一个cookie
                $.cookie("login_username",$("#username").val())
                // $.cookie("login_password",$("#password").val(),{ expires: 1 })

                return true;
            });
            $("#fail > font").remove();
           var Cookis = document.cookie.length;
           if (Cookis > 0){
               $("#fail").html("<font color='#8b0000'>请输入正确的验证码</font>")
           }

        });
    </script>
</head>

<body style="background-image:url('../static/img/login_bg.jpg')">

<!--<div class="container "  style="background-color: #E0E0E0; border: 1px solid gold;">-->
<div class="container" >

    <div class="row  center-padding">

        <div class="col-md-12 div1" style="text-align: center;">
            <h3>用户登录</h3>
            <hr />
        </div>
        <form action="/user/login" method="post">
            <div class="col-md-12 div">
                <input type="text" id="username" name="username" class="form-control input-lg" placeholder="用户名:">
            </div>

            <div class="col-md-12 div1">
                <input type="password" id="password" name="passwd" class="form-control input-lg" placeholder="密码:">
            </div>

            <div class="col-md-12 div1">

                <div class="col-md-5">
                    <input type="number" minlength="6" maxlength="6" name="captcha" class="form-control input-sm" placeholder="验证码:" size="">
                </div>
                <div class="col-md-5" id="fail">
                   {{.Success}}
                </div>

                <div class="col-md-12 clearfix">
                    {{create_captcha}}
                </div>

            </div>

            <div class="col-md-12"  style="padding-left: 60px;">

                <div class="row col-md-6 div3" >

                    <!--<div class="col-md-12" style=" border: 1px solid sandybrown; padding: 0 20 50px 10px;">-->
                    <button type="submit" class="btn btn-success  btn-md btn-block">登录</button>
                    <!--</div>-->
                </div>

                <div class="col-md-6 div2">
                    <!--<div class="col-md-12" style="float: left;border: 1px solid sandybrown;">-->
                    <button id="rest" type="reset" class="btn btn-success  btn-md btn-block ">重置</button>
                    <!--</div>-->
                </div>

            </div>
            <div class="" style="padding-left: 10px">
                没有账户，<a href="/user">立即注册</a>
            </div>
            <div style="float: right;padding-right: 10px;">
             <a href="/">
                 <span class="glyphicon glyphicon-share-alt"> </span>
             </a>
            </div>
        </form>
    </div>
</div>
<!--</div>-->
<script>
    $(function () {
        var login_sta = $.cookie("Login_sta")
        if (login_sta == "0"){
            alert("登录失败！");
            $.removeCookie("Login_sta")
        }
        $(function () {
            var StaVal = $.cookie("register");
            if (StaVal == "Succese"){
                alert("注册成功！请输入账号密码登录。");
                $.removeCookie("register");
            }
        });
    });
</script>
</body>

</html>